$(function () {
  // 图表1 ：
  //  创建echarts 实例， 指定图表父元素 
  var myChart = echarts.init(document.getElementById('c1'));

  // 指定图表相关数据 和  设置
  var option = {
    // 标题
    title: {
      text: '2020年注册人数'
    },
    // 提示工具
    tooltip: {},
    // 图例 
    legend: {
      data: ['注册人数', '销量']
    },
    // x 轴
    xAxis: {
      data: ["一月", "二月", "三月", "四月", "五月", "六月"]
    },
    // y 轴， 一般不用设置，会自动智能生成 
    yAxis: {},
    // 系列 
    series: [
      {
        name: '注册人数', // 数据名称 
        type: 'bar', // 图表类型 bar  柱状图  line 线图  pie 饼图 
        data: [5, 20, 136, 10, 10, 20]
      },
      {
        name: '销量', // 数据名称 
        type: 'line', // 图表类型 bar  柱状图  line 线图  pie 饼图 
        data: [15, 120, 86, 40, 20, 33]
      }
    ]
  };

  // 把准备好的数据 option 交给表进行显示 
  myChart.setOption(option);


  // 图表1 ：
  //  创建echarts 实例， 指定图表父元素 
  var myChart2 = echarts.init(document.getElementById('c2'));

  // 指定图表相关数据 和  设置
  var option2 = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: ['阿迪王', '耐克', '新百伦', '李宁', '老北京布鞋']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: '阿迪王' },
          { value: 310, name: '耐克' },
          { value: 234, name: '新百伦' },
          { value: 135, name: '李宁' },
          { value: 1548, name: '老北京布鞋' }
        ]
      }
    ]
  };

  // 把准备好的数据 option 交给表进行显示 
  myChart2.setOption(option2);
})